<template>
    <base-panel>
        <el-avatar :size="100" :src="imgUrl" style="margin-left: calc(50% - 50px); margin-bottom: 20px">
            <img src="@/assets/images/headPortrait.png"/>
        </el-avatar>
        <el-form
                :model="ruleForm"
                ref="ruleForm"
                label-width="100px"
                class="demo-ruleForm"
                size="small"
        >
            <el-form-item label="工号" prop="identity">
                <el-input v-model="ruleForm.identity" style="width: calc(100% - 100px)"></el-input><el-button type="primary" style="margin-left: 15px" @click="getUserInfo">查询用户</el-button>
            </el-form-item>
            <el-form-item label="姓名" prop="alias">
                <el-input v-model="ruleForm.alias"></el-input>
            </el-form-item>
            <!--        <el-form-item label="邮箱" prop="email">-->
            <!--          <el-input v-model="ruleForm.email"></el-input>-->
            <!--        </el-form-item>-->
            <el-form-item label="手机号" prop="phone">
                <el-input v-model="ruleForm.phone"></el-input>
            </el-form-item>
            <el-form-item label="部门" prop="dept_name">
                <el-input v-model="ruleForm.dept_name"></el-input>
            </el-form-item>
            <el-form-item label="角色" prop="role">
                <el-select
                        v-model="ruleForm.role"
                        placeholder="请选择"
                        style="width:100%"
                        multiple
                        filterable
                        clearable
                        @change="$forceUpdate()"
                >
                    <el-option
                            v-for="item in rolelist"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                    >
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="类型" prop="type_name">
                <el-input v-model="ruleForm.type_name"></el-input>
            </el-form-item>
<!--            <el-form-item label="行政级别" prop="xzjb">-->
<!--                <el-select-->
<!--                        v-model="ruleForm.xzjb"-->
<!--                        placeholder="请选择行政级别"-->
<!--                        style="width:100%"-->
<!--                        clearable-->
<!--                >-->
<!--                    <el-option :value="0" label="未知"></el-option>-->
<!--                    <el-option :value="1" label="科员"></el-option>-->
<!--                    <el-option :value="2" label="副科级"></el-option>-->
<!--                    <el-option :value="3" label="正科级"></el-option>-->
<!--                    <el-option :value="4" label="副处级"></el-option>-->
<!--                    <el-option :value="5" label="正处级"></el-option>-->
<!--                    <el-option :value="6" label="副厅级"></el-option>-->
<!--                    <el-option :value="7" label="正厅级"></el-option>-->
<!--                </el-select>-->
<!--            </el-form-item>-->
            <el-form-item label="办公室电话" prop="tel">
                <el-input v-model="ruleForm.tel"></el-input>
            </el-form-item>
<!--            <el-form-item label="unicode" prop="unicode">-->
<!--                <el-input v-model="ruleForm.unicode"></el-input>-->
<!--            </el-form-item>-->
<!--            <el-form-item label="部门unicode" prop="dept_code">-->
<!--                <el-input v-model="ruleForm.dept_code"></el-input>-->
<!--            </el-form-item>-->
            <div style="text-align: center">
                <el-button type="primary" @click="toSave">保存用户</el-button>
            </div>
        </el-form>
    </base-panel>
</template>
<script>
    import role from "@/api/systemManagement/role/index";
    import UserImport from "@/api/UserImport/index";
    export default {
        components: {},
        data() {
            return {
                ruleForm: {
                    alias: "",
                    is_active: true,
                    phone: "",
                    tel: "",
                    identity: "",
                    role: [],
                    no_order: 0,
                    xzjb: 0,
                    unicode:"",
                    type_name:"",
                    dept_code:"",
                    dept_name:""
                },
                imgUrl:"",
                rolelist:[]
            }
        },
        created() {
            this.getList()
        },
        methods:{
            getList() {
                this.loading = true;
                role.getSimpleList().then(res => {
                            this.rolelist = res.data;
                            if(this.rolelist.length>0){
                                this.ruleForm.role.push(this.rolelist[0].id)
                            }
                    })
            },
            getUserInfo(){
                if(this.ruleForm.identity){
                    UserImport.getUserInfo({identity:this.ruleForm.identity}).then(res=>{
                        this.ruleForm = {...this.ruleForm,...res.data}
                    })
                    this.imgUrl = process.env.VUE_APP_AVATAR_URL+this.ruleForm.identity
                }else{
                    this.msgError("请输入工号！")
                }
            },
            toSave(){
                UserImport.addUser(this.ruleForm).then(res=>{
                    this.msgSuccess(res.msg)
                    this.$refs.ruleForm.resetFields()
                    this.imgUrl =""
                })
            }
        }
    }
</script>
